<template>
  <a-modal
    :title="`${ okHidden ? '' : model && model.id ? '编辑' : '新增'}题目`"
    :ok-button-props="{ style: okHidden && { display: 'none' } }"
    :width="680"
    :visible="visible"
    :confirmLoading="loading"
    :maskClosable="false"
    @ok="() => { $emit('ok') }"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <a-form-item v-if="model && model.id" label="主键ID" hidden>
          <a-input v-decorator="['id', { initialValue: model.id }]" disabled />
        </a-form-item>
        <a-form-item hidden label="主键ID">
          <a-input v-decorator="['survey_id', { initialValue: model.survey_id }]" />
        </a-form-item>
        <a-form-item label="题目">
          <a-textarea :disabled="okHidden" placeholder="请输入题目" v-decorator="['question_description', { initialValue: model.question_description, rules: [{required: true, message: '题目不能为空！' }]}]" />
        </a-form-item>
        <a-form-item hidden label="题目">
          <a-textarea :disabled="okHidden" placeholder="请输入题目" v-decorator="['question_option']" />
        </a-form-item>
        <a-form-item label="选项">
          <a-textarea hidden :disabled="okHidden" v-decorator="['right_answer', { initialValue: model.right_answer, rules: [{required: true, message: '请勾选正确选项！' }]}]" />
          <!-- <a-textarea :disabled="okHidden" v-decorator="['question_option', { initialValue: model.question_option, rules: [{required: true, message: '选项不能为空！' }]}]" /> -->
          <div style="display: flex;">
            <div style="display: flex;width: 220px;">
              选项文字
            </div>
            <div style="margin-left: 60px;">
              正确选项
            </div>
            <div style="display: flex; cursor: pointer; margin-left: 60px;">
              <div>上移</div>
              <div style="margin-left: 20px;">下移</div>
            </div>
          </div>
          <div style="display: flex;" v-for="(item, index) in option" :key="index">
            <div style="display: flex;width: 220px;">
              <a-input v-model="item.option" />
              <a-button @click="add">
                +
              </a-button>
              <a-button @click="del(index)" :style="{ opacity: index > 0 ? 1 : 0, pointerEvents: index > 0 ? 'all' : 'none'}">
                -
              </a-button>
            </div>
            <div style="margin-left: 60px; padding-left: 25px;">
              <a-checkbox @change="onChange($event, index)" v-model="item.is_right_answer"></a-checkbox>
            </div>
            <div style="display: flex; margin-left: 60px;">
              <div style="padding-left: 25px; cursor: pointer;" @click="upper(index)" :style="{ opacity: index > 0 ? 1 : 0, pointerEvents: index > 0 ? 'all' : 'none' }"><a-icon type="arrow-up" /></div>
              <div style="padding-left: 12px; margin-left: 20px; cursor: pointer;" :style="{ opacity: index < option.length - 1 ? 1 : 0, pointerEvents: index < option.length - 1 ? 'all' : 'none' }" @click="below(index)"><a-icon type="arrow-down" /></div>
            </div>
          </div>
        </a-form-item>
        <a-form-item label="分值">
          <a-input :disabled="okHidden" v-decorator="['score', { initialValue: model.score, rules: [{required: true, message: '分值不能为空！' }]}]" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
// 表单字段
const fields = ['id', 'survey_id', 'question_description', 'score', 'question_option', 'right_answer']

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    okHidden: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    },
    classList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 }
      }
    }
    return {
      form: this.$form.createForm(this),
      currentLength: 0,
      examStatus: '1',
      examWay: this.model.type,
      radioStyle: {
        display: 'block',
        height: '30px',
        lineHeight: '30px'
      },
      ruleContent: '',
      option: [
        {
          'option': '',
          'is_right_answer': false,
          'sort': 1
        }
      ]
    }
  },
  watch: {
    option: {
      handler (newVal, oldVal) {
        this.form.setFieldsValue({ 'question_option': JSON.stringify(this.option) })
      },
      deep: true
    },
    model: {
      handler (newVal, oldVal) {
        try {
          this.option = JSON.parse(newVal.question_option)
        } catch (e) {
          this.option = newVal.question_option
        }
        for (let i = 0; i < this.option.length; i++) {
          if (this.option[i]['is_right_answer']) {
            this.form.setFieldsValue({ 'right_answer': this.option[i].sort })
          }
        }
        // this.form.setFieldsValue(pick(this.model, fields))
      },
      deep: true
    }
  },
  created () {
    // 防止表单未注册
    fields.forEach(v => this.form.getFieldDecorator(v))
    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      this.$nextTick(() => {
        this.model && this.form.setFieldsValue(pick(this.model, fields))
      })
    })
  },
  methods: {
    onChange (el, a) {
      if (el.target.checked) {
        for (let i = 0; i < this.option.length; i++) {
          this.option[i].is_right_answer = false
          // const item = this.option[i]
          this.$set(this.option, i, this.option[i])
        }
        this.option[a].is_right_answer = true
        this.$set(this.option, a, this.option[a])
        console.log(this.option)
        this.form.setFieldsValue({ 'right_answer': this.option[a].sort })
      } else {
        this.form.setFieldsValue({ 'right_answer': '' })
      }
    },
    add () {
      this.option.push({
        'option': '',
        'is_right_answer': false,
        'sort': this.option.length + 1
      })
    },
    del (i) {
      this.option.splice(i, 1)
    },
    upper (i) {
      const newItem = {
        'option': this.option[i - 1]['option'],
        'is_right_answer': this.option[i - 1]['is_right_answer'],
        'sort': this.option[i - 1]['sort']
      }
      const oldItem = {
        'option': this.option[i]['option'],
        'is_right_answer': this.option[i]['is_right_answer'],
        'sort': this.option[i]['sort']
      }
      this.$set(this.option, i, newItem)
      this.$set(this.option, i - 1, oldItem)
    },
    below (i) {
      const newItem = {
        'option': this.option[i + 1]['option'],
        'is_right_answer': this.option[i + 1]['is_right_answer'],
        'sort': this.option[i + 1]['sort']
      }
      const oldItem = {
        'option': this.option[i]['option'],
        'is_right_answer': this.option[i]['is_right_answer'],
        'sort': this.option[i]['sort']
      }
      this.$set(this.option, i, newItem)
      this.$set(this.option, i + 1, oldItem)
    }
  },
  components: {
  }
}
</script>

<style scoped>
  >>> .ant-upload.ant-upload-select-picture-card {
    margin-bottom: 0
  }
  >>> .clearfix {
    height: 110px
  }
  >>> .remove70 {
    margin-bottom: 110px !important;
    height: 300px !important;
  }
</style>
